import React, {useState} from "react";
import {FbInfo} from "@/api/web/FileBucketApi.ts";
import {createStyles} from "antd-style";
import FileApi, {FileObj} from "@/api/web/FileApi.ts";
import {Button, Modal} from "antd";
import filePreviewProcess from "@/components/FilePreviewProcess";
import Empty from "antd/es/empty/empty";
import PathList from "@/components/PathList.tsx";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            min-height: 100vh;
            padding: 10px 0 0 0;
            border-bottom: 1px solid ${token.colorBorder};
        `,
    }
})

interface Props {
    fbInfo: FbInfo
    pathList: string[]
}

const DefaultBucket: React.FC<Props> = ({fbInfo, pathList}) => {
    const {styles} = useStyles();
    const [preViewFile, setPreViewFile] = useState<FileObj>()
    const [showModal, setShowModal] = useState(false)

    return (
        <div className={styles.container}>
            <PathList
                pathList={pathList}
                onClick={(path) => {
                    FileApi.getFileObjByPath(path).then((res) => {
                        setShowModal(true)
                        setPreViewFile(res.data)
                    })
                }}
                preProcess={(path) => {
                    return path.substring(fbInfo.rootPath.length)
                }}
                bottomDivider
            />

            <Modal
                open={showModal}
                onCancel={() => setShowModal(false)}
                onOk={() => setShowModal(false)}
                closeIcon={null}
                footer={null}
            >
                <ul>
                    {
                        preViewFile ? filePreviewProcess(preViewFile).map(item => {
                            return (
                                <li key={item.key}>
                                    <p>{item.name}</p>
                                    <div>{item.fc}</div>
                                </li>
                            )
                        }) : <Empty/>
                    }
                    <li>
                        {preViewFile &&
                            <Button
                                type="link"
                                href={FileApi.getFileLink(preViewFile.path)}
                            >下载文件</Button>
                        }
                    </li>
                </ul>
            </Modal>
        </div>
    )
}

export default DefaultBucket
